<template>
  <div class="c-bg-white">
    <div class="c-ph24 c-pt30 c-pb18 c-fc-xblack c-fs26">公告内容</div>
    <div class="c-ph24">
      <div class="c-bd1-mgray c-bg-sgray c-ph20 c-pv20 c-br8">
        <textarea
          rows="5"
          class="c-bg-sgray c-fc-xblack c-w100 c-bd0 c-fs24"
          :maxlength="500"
          :placeholder="'请输入公告内容'"
          v-model="questionDesc"
        ></textarea>
        <div class="c-fs20 c-fc-sgray c-textAlign-r"> {{questionDesc.length}}/500 </div>
      </div>
    </div>
    <div class="c-ph24 c-mt28">
      <div class="c-bd-t1-f6 c-pt15">
        <div class="c-flex-row c-aligni-center c-justify-sb c-pb8">
          <div class="c-fs26 c-fc-xblack">自动通知</div>
          <inline-x-switch
            v-model="notice"
            :value="true"
            @on-change="clickCheckNotice"
          ></inline-x-switch>
        </div>
        <div class="c-fs22 c-fc-gray">访问圈子的新老成员将弹框提示以上信息</div>
      </div>
    </div>
    <div
      class="c-pf c-p-b0 c-w100 c-maxw640 c-hh124 c-bg-white c-ph24 c-flex-row c-justify-center c-aligni-center"
      @click="handleClickSendNotice"
    >
      <div
        class="c-fs28 c-fc-white theme-bg-gradient c-w100 c-hh64 c-br30 c-flex-row c-justify-center c-aligni-center"
        :class="questionDesc == '' && noticeMessage == '' ? 'c-opacity30':'c-opacity100'"
      >保存</div>
    </div>
  </div>
</template>

<script>
import { InlineXSwitch } from 'ckjrweb-mp-ui/src/components/index';
import { utilJs } from "@/utils/common.js";
export default {
  name: "CircleNotice",
  components: {
    InlineXSwitch
  },
  data() {
    return {
      questionDesc: "",
      noticeMessage: "",
      notice: true,
      circleId: "",
      isClick: false,
    }
  },
  created() {
    utilJs.appShare(this);
  },
  activated() {
    setDocumentTitle("圈子公告");
    this.circleId = this.$route.query.circleId || "";//圈子id
    this.noticeMessage = "";
    this.isClick = false;
    this.getCircleData();
  },
  methods: {
    // 获取圈子信息
    getCircleData() {
      utilJs.getMethod(global.apiurl + `circle/details/${this.circleId}?type=2`, res => {
        this.questionDesc = res.notice || "";
        this.noticeMessage = res.notice || "";
        this.notice = res.isAutoNotice == 1 ? true : false;
        this.wechatShare();
      }, failRes => {
        this.$routerGo(this, "replace", {
          path: "/homePage/circle/circleFeed",
          query: {id: this.circleId}
        })
      });
    },
    saveCircleNotice() {
      let _this = this;
      if (this.isClick) {
        return true;
      }
      this.isClick = true;
      utilJs.postMethod(global.apiurl + `circle/saveCircleNotice`, {
        circleId: this.circleId,
        notice: this.questionDesc,
        isAutoNotice: this.notice == true ? 1 : -1
      }, res => {
        this.$showCjToast({
          text: '发布成功',
          type: "success",
        }).then(() => {
          _this.$routerGo(_this, "replace", {
              path: "/homePage/circle/circleFeed",
              query: {
                id: _this.circleId
              }
            })
        });
      }, failRes => {
        this.isClick = false;
      })
    },
    handleClickSendNotice() {
      let _this = this;
      if (this.questionDesc == "" && this.noticeMessage == "") {
        this.$showCjToast({
          text: "请输入公告内容后发送",
          type: "warn",
        });
        return true;
      }
      if (this.questionDesc == "" && this.noticeMessage != "") {
        this.$cjConfirm({
          title: '确定清空', //
          titleCenter: true, //标题是否居中
          message: "清空后公告将不显示",
          messageCenter: true, //内容是否居中
          showMasker: true, //是否显示透明背景
          clickCloseModal: false, //是否点击透明背景关闭弹窗
          showCancelButton: true, //是否显示取消按钮
          cancelButtonText: '', //取消按钮文本
          confirmButtonText: '清空', //确认按钮文本
          onConfirm() {
            _this.saveCircleNotice();
          },
          onCancel() {
          },
        })
        return true;
      }
      this.saveCircleNotice();
    },
    clickCheckNotice(val) {
      this.notice = val;
    },
    //分享
    wechatShare: function () {
      let title = '圈子公告';
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}&circleId=${this.circleId}`;
      let shareDesc = window.localStorage.getItem("shareDesc") || '点击查看详情';
      utilJs.wechatConfig(shareUrl, title, "", shareDesc, function () { }, true);
    },
    //手机端分享
    appShare: function () {
      let title = '圈子公告';
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}&circleId=${this.circleId}`;
      let shareDesc = window.localStorage.getItem("shareDesc") || '点击查看详情';
      utilJs.appShareTrue(title, "", shareUrl, shareDesc);
    }
  }
}
</script>

<style lang="less" scoped>
textarea {
  resize: none;
  line-height: 0.85rem;
}
</style>